import { useNavigate, useParams } from "react-router-dom";
import { NavBar } from "antd-mobile";
import { useEffect, useState } from "react";
import { loadProductById } from "../../services/products";

function Detail() {
  const navigate = useNavigate();
  const { id } = useParams();
  const [info, setInfo] = useState<App.Product | undefined>();
  useEffect(() => {
    // @ts-ignore
    loadProductById(id).then((res) => {
      setInfo(res.data);
    });
  }, []);
  return (
    <div className="detail">
      <NavBar
        onBack={() => {
          navigate(-1);
        }}
      >
        {info?.name}
      </NavBar>
      <div
        className="content"
        dangerouslySetInnerHTML={{ __html: info?.content! }}
      ></div>
    </div>
  );
}

export default Detail;
